<template>
	<view>
		<view class="nav">
			<uni-nav-bar title="我的订单" leftIcon="back" @clickLeft="$tab.back()" :statusBar="true" fixed="false"
				:border="false">
			</uni-nav-bar>
			<view class="bg-FFF">
				<u-tabs :list="type == 1 ? orderStatusList : dikouList" :current="tabIndex" lineColor="#DF2E2C"
					:activeStyle="{
				    color: '#DF2E2C',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				    color: '#606266',
				    transform: 'scale(1)'
				}" @change="tabChange"></u-tabs>
			</view>
		</view>
		<view :style="{
			height:occupyHeiht + 'px'
		}">

		</view>

		<view class="px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false"
				:emptyImage="'https://file.fulewanjia.com/fulewanjia/profile/preImages/state/img_zanwudigndan.png'">
				<view v-for="(item,index) in list" :key="item.id" class="py-24 px-16 bg-FFF round-12 mt-28"
					@click="getdetail(item)">
					<view class="text-24 flex align-center justify-between">
						<view class="">
							订单编号：{{item.orderNo}}
						</view>
						<view class="text-FF7C01">
							{{orderstate(item.state)}}
						</view>
					</view>
					<u-divider></u-divider>
					<view class="">
						<view v-for="(i, j) in item.orderSpuList" :key="j" class="p-12" :style="{
							marginTop:index === 0 ? '0' : '20rpx'
						}">
							<!-- 判断如果是有规格的 -->
							<view class="flex items-center" v-if="i.skuInfo">
								<view class="image-200">
									<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.skuInfo.icons"
										mode="">
									</image>
								</view>

								<view class="ml-20 flex flex-col text-32 w-full">
									<text class="u-line-2">{{ i.spuInfo.name }}</text>
									<view class="flex items-center mt-20">
										<view class="text-gray  text-20" v-if="i.skuInfo.mallSkuSpecs.length > 0">
											{{i.skuInfo.mallSkuSpecs[0].specName}}:{{i.skuInfo.mallSkuSpecs[0].specValue}}
										</view>
										<view class="text-gray  text-20 ml-12" v-if="i.skuInfo.mallSkuSpecs.length > 1">
											{{i.skuInfo.mallSkuSpecs[1].specName}}:{{i.skuInfo.mallSkuSpecs[1].specValue}}
										</view>
									</view>
									<view class="flex justify-between mt-48 items-center w-full">
										<view class="text-E2382B">
											￥{{ i.skuInfo.price }}
										</view>
										<view>X {{ i.num }}</view>
									</view>
								</view>
							</view>
							<!-- 没规格的 -->
							<view class="flex items-center" v-else>
								<view class="image-200">
									<image class="image-200 round-12" :src="globalConfig.imagePrefix + i.spuInfo.cover"
										mode="">
									</image>
								</view>

								<view class="ml-20 flex flex-col text-32 w-full">
									<text class="u-line-2">{{ i.spuInfo.name }}</text>
									<view class="flex justify-between mt-48 items-center w-full">
										<view class="text-E2382B">
											￥{{ i.spuInfo.price }}
										</view>
										<view>X {{ i.num }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex align-center mt-16 flex-row-reverse">
						<view v-if="item.state == 0" @click.stop="cancel(item)" class="box_2 text-28 ml-32">
							取消订单
						</view>
						<view @click.stop="getdetail(item,true)" v-if="item.state == 0"
							class="box_2 text-28 box_3 ml-32">
							去付款
						</view>
						<view @click.stop="confirmreceipt(item.orderNo)" v-if="item.state == 2 && type != 2"
							class="box_2 text-28 box_3 ml-32">
							确认收货
						</view>
						<view @click.stop="seelogistics(item.orderNo)"
							v-if="(item.state == 2 || item.state == 3)  && type != 2" class="box_2 text-28 ml-32">
							查看物流
						</view>
						<view v-if="item.state == 4" @click.stop="deleteOrder(item.orderNo)"
							class="box_2 text-28 ml-32">
							删除订单
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<!-- 物流 -->
		<u-popup :show="isLogistics" @close="isLogistics = false,wlInfo = {}" mode="center" round="16"
			:closeable="true">
			<logistics :wlInfo="wlInfo"></logistics>
		</u-popup>

		<!-- 消费礼包支付 -->
		<u-modal :show="isGift" title="消费礼包" :content='giftContent' :closeOnClickOverlay="true" :showCancelButton="true"
			@close="isGift=false" @cancel="isGift=false" @confirm="isPayPassword = true,isGift = false"></u-modal>

		<!-- 支付密码 -->
		<u-popup :show="isPayPassword" @close="isPayPassword = false,payPassword=''" mode="center" :round="20">
			<view style="width:650rpx;padding: 48rpx;">
				<view class="pay_title">
					请输入支付密码
				</view>
				<view class="flex justify-between items-center mt-28">
					<u-code-input v-model="payPassword" :adjustPosition="false" :maxlength="6" dot
						:focus="true"></u-code-input>
				</view>
				<view class="mt-28 bg-theme round-12 text-center py-24 text-FFF" @click="giftPay">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		components: {
			logistics
		},
		data() {
			return {
				orderStatusList: this.$appConfig.orderStatusList,
				dikouList: this.$appConfig.dikouList,
				tabIndex: 0,
				occupyHeiht: 0,
				list: [],
				logistics_show: false,
				wlInfo: {},
				isGift: false, //消费礼包
				giftContent: "",
				giftPayId: null,
				isPayPassword: false,
				payPassword: "",
				isLogistics: false,
				globalConfig: getApp().globalData.config,
				type: null
			};
		},
		onLoad(e) {
			thro = this
			thro.type = e.type
			thro.tabIndex = Number(e.index)
		},
		onShow() {
			thro.refresh()
		},
		onReady() {
			let view = uni.createSelectorQuery().in(this).select(".nav");
			view.fields({
				size: true,
				scrollOffset: true
			}, data => {
				thro.occupyHeiht = data.height
			}).exec();
		},
		methods: {
			giftPay() {
				if (!thro.payPassword || thro.payPassword.length < 6) {
					uni.$u.toast('请输入支付密码')
					return false
				}
				thro.$Api.index.giftOrdersPayment({
					id: thro.giftPayId,
					payPassword: thro.payPassword
				}).then((pay) => {
					thro.payPassword = ''
					thro.isPayPassword = false
					uni.$u.toast(pay.msg)
					thro.refresh()
				})
			},
			getdetail(item) {
				thro.$tab.nav(`/pages/mine/order/orderDetail?id=${item.orderNo}`)
			},
			deleteOrder: throttle(2000, (id) => {
				thro.$Api.index.appOrdersDelete({
					orderNo: id,
				}).then((res) => {
					uni.$u.toast('删除成功')
					setTimeout(() => {
						thro.refresh()
					}, 1500)
				})
			},{
				noTrailing:true
			}),
			// 确认收获
			confirmreceipt: throttle(2000, (id) => {
				thro.$Api.index.orderFinished({
					orderNo: id
				}).then(() => {
					uni.$u.toast('收获成功!')
					setTimeout(() => {
						thro.refresh()
					}, 1500)
				})
			},{
				noTrailing:true
			}),
			// 取消订单
			cancel: throttle(2000, (item) => {
				thro.$Api.index.mallOrderCancel({
					orderNo: item.orderNo,
				}).then((res) => {
					uni.$u.toast('取消成功')
					setTimeout(() => {
						thro.refresh()
					}, 1500)
				})
			},{
				noTrailing:true
			}),
			seelogistics: throttle(2000, async (orderNo) => {
				const res = await thro.$Api.store.mallOrderLogistics({
					orderNo //订单号
				})
				console.log(res)
				let tem = res.data.data
				let obj = {}
				obj.logo = tem.expressCompanyLogo
				obj.post_name = tem.expressCompanyName
				obj.exp_phone = tem.number
				obj.post_no = res.data.taskNo
				obj.addr = tem.theLastMessage
				obj.list = tem.logisticsTraceDetails.map(i => {
					i.location = i.areaName
					i.context = i.desc
					i.timeArr = [
						uni.$u.timeFormat((new Date(i.time)).getTime(), 'yyyy-mm-dd'),
						uni.$u.timeFormat((new Date(i.time)).getTime(), 'hh:mm:ss')
					]
					return i
				})

				thro.wlInfo = obj
				thro.isLogistics = true
			},{
				noTrailing:true
			}),
			orderstate(state) {
				let value = ''
				if (thro.type == 1) {
					thro.globalConfig.appConfig.orderStatusList.forEach(item => {
						if (state == item.status) {
							value = item.name
						}
					})
				} else {
					thro.globalConfig.appConfig.dikouList.forEach(item => {
						if (state == item.status) {
							value = item.name
						}
					})
				}
				return value
			},
			refresh() {
				thro.$nextTick(() => {
					thro.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					thro.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						thro.list = [];
					}

					let form = {
						pageNum: pullScroll.page,
						pageSize: 10,

					}
					if (thro.type == 2) {
						form.columnType = 12
						form.state = thro.dikouList[thro.tabIndex].status
					} else {
						form.state = thro.orderStatusList[thro.tabIndex].status
					}

					const res = await thro.$Api.index.ordersList(form)

					thro.list = thro.list.concat(res.rows || []);

					if (res.total == 0) {
						pullScroll.empty()
					}

					if (thro.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			tabChange(e) {
				thro.tabIndex = e.index
				thro.refresh()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 100%;
	}

	.box_2 {
		padding: 16rpx 40rpx;
		border-radius: 8rpx;
		border: 2rpx solid #E6E6E6;
	}

	.box_3 {
		background: #F68100;
		color: white;
	}
</style>